<template>
<!-- 	<view class="home">
		<image class="bg-img" src="@/static/zeliuc.png"></image>
		<view class="input">
				<u--input prefixIcon="account-fill" v-model="username" placeholder="请输入账号"></u--input>
		</view>
		<view class="input">
				<u--input prefixIcon="lock-opened-fill" v-model="password" placeholder="请输入密码"></u--input>
		</view>
		<view class="button">
			<u-button type="primary" shape="circle" text="登录" @click="login"></u-button>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view> -->
	<view class="container">
	  <!-- 顶部标题 -->
	  <view class="header">
		  <image class="bg-img" src="@/static/zeliuc.png"></image>
	    <text class="title">{{ isLogin ? '欢迎登录' : '用户注册' }}</text>
	  </view>
	  
	  <!-- 登录/注册表单 -->
	  <view class="form-container">
	    <!-- 用户名输入 -->
	    <view class="input-group">
	      <text class="label">用户名</text>
	      <input 
	        class="input" 
	        v-model="form.username" 
	        placeholder="请输入用户名" 
	        placeholder-class="placeholder"
	      />
	    </view>
	    
	    <!-- 密码输入 -->
	    <view class="input-group">
	      <text class="label">密码</text>
	      <input 
	        class="input" 
	        v-model="form.password" 
	        password 
	        placeholder="请输入密码" 
	        placeholder-class="placeholder"
	      />
	    </view>
	    
	    <!-- 注册时的确认密码 -->
	    <view class="input-group" v-if="!isLogin">
	      <text class="label">确认密码</text>
	      <input 
	        class="input" 
	        v-model="form.confirmPassword" 
	        password 
	        placeholder="请再次输入密码" 
	        placeholder-class="placeholder"
	      />
	    </view>
	    
	    <!-- 登录按钮 -->
	    <button 
	      class="submit-btn" 
	      :class="{ 'register-btn': !isLogin }" 
	      @click="handleSubmit"
	    >
	      {{ isLogin ? '登录' : '注册' }}
	    </button>
	  </view>
	  
	  <!-- 切换登录/注册 -->
	  <view class="switch-text" @click="toggleLoginRegister">
	    {{ isLogin ? '没有账号？立即注册' : '已有账号？立即登录' }}
	  </view>
	  
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '',
				username: "admin",
				password: "admin123",
				styles: {
					color: '#333', //输入文字颜色
					borderColor: '#666' //边框颜色
				}
			}
		},
		onLoad(option) {
			this.username = this.vuex_usernameLogin,
				this.password = this.vuex_passwordLogin
		},
		methods: {

			login() {
				uni.showToast({
					title: '登录中...',
					icon: 'loading',
					mask: true,
					duration: 500
				});
				uni.$u.http.post('/login', {
					"username": this.username,
					"password": this.password
				}).then(res => {
					console.log('登录',res);
					if (res.code != 200) {
						this.$refs.uToast.show({
							type: 'error',
							position: 'top',
							icon: false,
							message: '账号密码错误'
						})
					}
					if (res.code == 200) {
						uni.hideLoading()
						console.log('获取---', res)
						uni.$u.vuex('vuex_token', res.token)
						uni.$u.vuex('vuex_login', 1)
						uni.$u.vuex('vuex_usernameLogin', this.username)
						uni.$u.vuex('vuex_passwordLogin', this.password)
						uni.redirectTo({
							url: '/pages/index/home'
						});

					}
				}).catch(err => {
					uni.showToast({
						title: '未连接网络',
						icon: 'loading',
						mask: true,
						duration: 500
					});
					console.log('错误', err);
				})
			},
			// 用户信息
			userFn() {
				uni.$u.http.get('/system/user/profile').then(res => {
					console.log('res', res);
					if (res.code == 200) {
						uni.$u.vuex('vuex_user', res.data)
					}
				}).catch(err => {
					console.log('错误', err);
				})
			}
		}
	}
</script>
<style scoped lang="scss">
	.bg-img {
		width: 300rpx;
		height: 300rpx;
		margin: 150rpx 0 100rpx 0;
	}
	// .home {
	// 	text-align: center;

	// 	.text {
	// 		display: flex;
	// 		justify-content: center;
	// 	}

	// 	.bg-img {
	// 		width: 300rpx;
	// 		height: 300rpx;
	// 		margin: 150rpx 0 100rpx 0;
	// 	}

	// 	.input {
	// 		padding: 20rpx 60rpx;
	// 		background-color: rgba(255, 255, 255, 0.0);
	// 	}

	// 	.button {
	// 		padding: 60rpx;
	// 	}

	// 	.bom_text {
	// 		width: 750rpx;
	// 		text-align: center;
	// 		position: absolute;
	// 		bottom: 5vh;
	// 		color: #95a4ad;
	// 		letter-spacing: 20rpx;
	// 	}
	// }
</style>
<style>
	page {
		background-color: #f1f4f6;
	}
</style>
<style scoped lang="scss">
/* 公共样式 */
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40rpx;
  background-color: #f8f8f8;
  min-height: 100vh;
  box-sizing: border-box;
}

/* 头部标题 */
.header {
  margin-top: 120rpx;
  margin-bottom: 80rpx;
  text-align: center;
}

.title {
  font-size: 48rpx;
  font-weight: bold;
  color: #333;
}

/* 表单容器 */
.form-container {
  width: 100%;
  max-width: 600rpx;
}

/* 输入框组 */
.input-group {
  margin-bottom: 40rpx;
}

.label {
  display: block;
  font-size: 28rpx;
  color: #666;
  margin-bottom: 16rpx;
}

.input {
  width: 100%;
  height: 80rpx;
  padding: 0 20rpx;
  border: 1rpx solid #ddd;
  border-radius: 8rpx;
  font-size: 28rpx;
  background-color: #fff;
  box-sizing: border-box;
}

.placeholder {
  color: #ccc;
  font-size: 28rpx;
}

/* 提交按钮 */
.submit-btn {
  width: 100%;
  height: 88rpx;
  line-height: 88rpx;
  border-radius: 44rpx;
  background-color: #007aff;
  color: #fff;
  font-size: 32rpx;
  margin-top: 60rpx;
  border: none;
}

.register-btn {
  background-color: #4cd964;
}

/* 切换登录/注册文本 */
.switch-text {
  margin-top: 40rpx;
  color: #007aff;
  font-size: 28rpx;
}

/* 其他登录方式 */
.other-login {
  margin-top: 100rpx;
  width: 100%;
  text-align: center;
}

.other-login-text {
  color: #999;
  font-size: 24rpx;
  position: relative;
}

.other-login-text::before,
.other-login-text::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 120rpx;
  height: 1rpx;
  background-color: #eee;
}

.other-login-text::before {
  left: 0;
}

.other-login-text::after {
  right: 0;
}



.icon {
  width: 50rpx;
  height: 50rpx;
}
</style>